<template>
  <div class="adminSet">
    <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <!-- <span class="title layui-field-title el-icon-document">
        <legend>签到积分</legend>
      </span> -->
      <!-- <div class="cellLabel"> -->
        <!-- <el-form-item v-if="showScoreValFalse" style>
          每天签到积&nbsp;&nbsp;&nbsp;
          <el-input
            v-model.number="ruleForm.signBonuspoint"
            type="number"
            min="0"
            class="input_edit"
          >
            <template slot="append">分</template>
          </el-input>
          <span>&nbsp;&nbsp;&nbsp;积1分</span>
        </el-form-item> -->
        <!-- <el-form-item style>
          <span style="margin-right:25px">连续累计</span>
          <el-input v-model.number="ruleForm.signTimes" type="input" min="0" class="input_edit">
            <template slot="append">次</template>
          </el-input>
          <span style="margin:0 10px">积</span>
          <el-input v-model.number="ruleForm.bonuspoint" type="number" min="0" class="input_edit">
            <template slot="append">分</template>
          </el-input>
        </el-form-item>-->
      <!-- </div> -->
      <span class="title layui-field-title el-icon-document">消费积分</span>
      <div class="cellLabel" style="margin-left:-70px">
        <el-form-item prop="scoreDayMax" class="label_edit">
          <span>单次消费每&nbsp;&nbsp;&nbsp;</span>
          <el-input
            v-model.number="ruleForm.moneyRate"
            type="number"
            min="0"
            class="input_edit"
            placeholder
          >
            <template slot="append">元</template>
          </el-input>
          <span>&nbsp;&nbsp;&nbsp;积1分</span>
        </el-form-item>

        <!-- <el-form-item class="label_edit">
          <span>每月&nbsp;&nbsp;&nbsp;</span>
          <el-input v-model.number="ruleForm.memberDay" type="number" min="0" class="input_edit">
            <template slot="append">日</template>
          </el-input>

          <el-input
            v-model.number="ruleForm.memberDayRatio"
            type="number"
            min="0"
            class="input_edit"
            placeholder
          >
            <template slot="append">倍</template>
          </el-input>
          <span>&nbsp;&nbsp;&nbsp;积分</span>
        </el-form-item>
        <el-form-item prop="scoreDayMax" class="label_edit">
          <span>每年会员生日&nbsp;&nbsp;&nbsp;</span>
          <el-input
            v-model.number="ruleForm.birthRatio"
            type="number"
            min="0"
            class="input_edit"
            placeholder
          >
            <template slot="append">倍</template>
          </el-input>
          <span>&nbsp;&nbsp;&nbsp;积分</span>
        </el-form-item>-->
        <!-- <span style="font-size:12px;color:#ccc">注：修正积分规则，请确保与资源配置（小程序）会员权益配图说明保持一致</span> -->
      </div>

      <el-form-item>
        <el-button
          type="primary"
          style="margin-top:20px;margin-left:20%;"
          @click="confirmEdit('ruleForm')"
          size="mini"
        >保存积分设置</el-button>
        <!-- <el-button type="primary" style="margin-top:20px" @click="goback()" size="mini">返回</el-button> -->
      </el-form-item>
    </el-form>

    <!-- <el-dialog :visible.sync="dialogVisible" width="55%" style=" padding: 10px 44px 58px;">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input v-model="formInline.goodsName" placeholder></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search()" size="mini">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save()" size="mini">保存选择</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="tableData"
        v-loading="loading"
        tooltip-effect="dark"
        border
        style="width: 100%"
        :reserve-selection="true"
        :row-key="getRowKeys"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
        <el-table-column prop="goodsBarcode" label="商品编码" width="280"></el-table-column>
        <el-table-column prop="goodsName" label="商品名称"></el-table-column>
      </el-table>
      <div class="block" style="margin-top:15px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15, 20]"
          :current-page="listQuery.current"
          :page-size="listQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible2" width="50%">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="等级名称">
          <el-input v-model="ruleForm.gradelevelName" placeholder></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="searchmember()" size="mini">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="kongtwo()" size="mini">保存选择</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="tableData2"
        tooltip-effect="dark"
        style="width: 100%"
        :reserve-selection="true"
        :row-key="getRowKeystwo"
        @selection-change="handleSelectionChangetwo"
      >
        <el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
        <el-table-column prop="gradelevelName" label="等级名称" width="120" align="center"></el-table-column>
        <el-table-column prop="gradelevelSeq" label="等级编码" width="120" align="center"></el-table-column>
        <el-table-column prop="createUser" label="创建人" show-overflow-tooltip align="center"></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible3" width="32%">
      <el-form ref="form" :model="form" label-width="83px">
        <el-form-item label="节假日名称">
          <el-input v-model="form.festivalName"></el-input>
        </el-form-item>

        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.beginTime"
              format="yyyy-MM-dd "
              value-format="yyyy-MM-dd "
              style="width: 100%;"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.endTime"
              format="yyyy-MM-dd "
              value-format="yyyy-MM-dd "
              style="width: 100%;"
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="mini" @click="saveday()">保存</el-button>
          <el-button size="mini">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>-->
  </div>
</template>

<script>
import {
  queryMember,
  queryStockGoods,
  //   queryMemberRules,
  queryBonusPointRules,
  saveBonusPointRule,
  updateMember
} from "@/api/integralrule";
// import { getmemberrules } from "@/api/promotionProgramEdit";
import qs from "qs";

export default {
  data() {
    return {
      listQuery: {
        current: 1,
        size: 10
      },
      formInline: {
        goodsName: ""
      },
      getRowKeys(row) {
        return row.goodsBarcode;
      },
      getRowKeystwo(row) {
        return row.gradelevelId;
      },
      form: {
        festivalName: "",
        bonuspointRatio: "",
        beginTime: "",
        endTime: ""
      },
      ruleForm: {
        signBonuspoint: "",
        signTimes: "",
        bonuspoint: "",
        moneyRate: "",
        memberDay: "",
        memberDayRatio: "",
        birthRatio: "",
        uuid: ""
      },
      signRules: [],
      loading: true,
      selVal: "连续签到",
      showScoreVal: false,
      showScoreValFalse: true,
      optionsDate: [],
      memberDay: [],
      dialogVisible: false,
      tablekongtwo: [],
      dialogVisible2: false,
      festdate: [],
      selectData: [],
      total: 0,
      tableData: [],
      tableData2: [],
      strData: [],
      dialogVisible3: false,
      checkboxGroupLevelScore: [],
      levelList: [],
      vl1: [],
      vl3: [],
      vl4: [],
      signRules: [],
      vl1ListData: [],
      dialogVisibleVl1: false,
      vl1Edit: {
        multiple1: ""
      },

      vl3Edit: {
        multiple3: "",
        festivalNameAdd: "",
        begDate: "",
        endDate: ""
      },
      dialogVisibleVl3: false
    };
  },

  mounted() {
    this.logininfo = localStorage.getItem("logininfo");
    this.orgSeq = JSON.parse(this.logininfo).orgSeq;
    this.getMemberDay();
    this.queryMember();
    // this.queryBonusPointRules();
  },

  methods: {
    //签到方式
    queryMember() {
      let data = {
        size: "5",
        current: "1",
        condition: {},
        descs: ["create_time"]
      };
      queryMember(data).then(res => {
        this.ruleForm.birthRatio = res.records[0].birthRatio;
        this.ruleForm.memberDay = res.records[0].memberDay;
        this.ruleForm.memberDayRatio = res.records[0].memberDayRatio;
        this.ruleForm.moneyRate = res.records[0].moneyRate;
        this.ruleForm.signBonuspoint = res.records[0].signBonuspoint;
        this.ruleForm.uuid = res.records[0].uuid;
        // this.resetForm();
      });
    },
    changeSignInType(event) {},
    //封装日期
    getMemberDay() {
      for (let i = 1; i <= 31; i++) {
        let id = String(i);
        let name = i + "号";
        let obj = { value: id, label: name };
        this.optionsDate.push(obj);
      }
    },
    // goback() {
    //   this.$router.go("-1");
    // },
    //查询积分规则
    queryBonusPointRules() {
      let data = {
        orgSeq: this.orgSeq
      };
      queryBonusPointRules(data).then(res => {
        let list = res.records;

        if (list.length > 0) {
          //正常情况下：主规则一个，附加的多个，周期一个
          let bean = list[list.length - 1]; //主规则
          console.log(list[list.length - 1], "IOIO");
          let memberDayStr = "";
          if (bean != null) {
            memberDayStr = bean.memberDay;
            this.ruleForm.uuid = bean.uuid;
            this.selectData = bean.goodsRules;
            this.tablekongtwo = bean.levelRules;
            this.festdate = bean.periodRules;
            this.ruleForm.signBonuspoint = bean.signBonuspoint;
            this.ruleForm.signTimes = bean.signRules[0].signTimes;
            this.ruleForm.bonuspoint = bean.signRules[0].bonuspoint;
            this.ruleForm.moneyRate = bean.moneyRate;
            this.ruleForm.memberDayRatio = bean.memberDayRatio;
            this.ruleForm.birthRatio = bean.birthRatio;
          }
          //签到方式

          this.changeSignInType(this.ruleForm.signInType);
          //会员日
          if (
            memberDayStr != null &&
            memberDayStr != "" &&
            memberDayStr != undefined
          ) {
            let str = memberDayStr.split(",");
            for (let i = 0; i < str.length; i++) {
              this.memberDay.push(str[i]);
            }
          }
        }
      });
    },
    //会员等级多倍积分
    addVipLevelScore() {
      this.dialogVisibleVl1 = true;
      //   this.queryMemberRules();
    },
    handleClick(v) {
      console.log(this.selectData, ";");

      this.selectData.forEach((item, i) => {
        if (v.uuid == this.selectData[i].uuid) {
          console.log(this.selectData[i], ";");
          this.selectData[i].status = 0;
        }
      });
    },
    handleClickone(v) {
      this.selectData.forEach((item, i) => {
        if (v.uuid == this.selectData[i].uuid) {
          this.selectData[i].status = 1;
        }
      });
    },
    handleClicktwo(v) {
      console.log(this.tablekongtwo, v, "ll");
      this.tablekongtwo.forEach((item, i) => {
        if (v.uuid == this.tablekongtwo[i].uuid) {
          this.tablekongtwo[i].status = 0;
        }
      });
    },
    handleClickthree(v) {
      this.tablekongtwo.forEach((item, i) => {
        if (v.uuid == this.tablekongtwo[i].uuid) {
          this.tablekongtwo[i].status = 1;
        }
      });
    },
    handleClickfour(v) {
      console.log(this.festdate, v, "ll");
      this.festdate.forEach((item, i) => {
        if (v.uuid == this.festdate[i].uuid) {
          this.festdate[i].status = 1;
        }
      });
    },
    handleClickfive(v) {
      console.log(this.festdate, v, "ll");
      this.festdate.forEach((item, i) => {
        if (v.uuid == this.festdate[i].uuid) {
          this.festdate[i].status = 0;
        }
      });
    },
    //查询等级
    // queryMemberRules() {
    //   let data = {};
    //   queryMemberRules(data).then(res => {
    //     this.levelList = res.records;
    //   });
    // },

    //会员等级多倍积分 保存
    saveLevelScore() {},
    //会员等级多倍积分 删除
    deleteLevelScore(val) {},

    // 特殊节日多倍积分
    addFestivalScore() {},
    //保存
    saveVl3() {},
    //删除
    deleteFestivalScore(val) {},

    getUuid() {},

    //选择商品
    checkGoods() {
      this.dialogVisible = true;
      //查询商品
      this.queryStockGoods();
    },
    //商品搜索查询
    search() {},
    //初始化查询商品列表
    queryStockGoods() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          goodsName: "",
          keyWord: "",
          orgSeq: this.orgSeq
        },
        ascs: [],
        descs: []
      };
      queryStockGoods(data).then(res => {
        this.loading = false;
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    saveday() {
      this.dialogVisible3 = !this.dialogVisible3;
      this.festdate.push({
        festivalName: this.form.festivalName,
        beginTime: this.form.beginTime,
        endTime: this.form.endTime,
        bonuspointRatio: this.form.bonuspointRatio,
        status: 1
      });
      console.log(this.festdate, "OIOU");
    },
    //勾选
    handleSelectionChange(list) {
      this.strData = list;
      console.log(list, "pp");
      this.multipleSelectionId = this.strData.map(item => {
        return item.goodsSeq;
      }); //勾选放在multipleSelection数组中
      console.log(this.multipleSelectionId, "oo");
    },
    //保存选择商品//去掉已经存在的商品，不能重复勾选
    save() {
      this.strData.forEach((item, i) => {
        let newGoodId = item.goodsSeq;
        let flag = true;
        this.selectData.forEach((itemOldData, i) => {
          if (newGoodId === itemOldData.goodsId) {
            flag = false;
          }
        });
        if (flag) {
          let data = {
            goodsName: this.strData[i].goodsName,
            goodsId: this.strData[i].goodsBarcode,
            bonuspointRatio: item.bonuspointRatio,
            goodsSeq: this.strData[i].goodsSeq,
            status: this.strData[i].status
          };
          this.selectData.push(data);
        }
      });
      this.dialogVisible = false;
    },
    // selectlevel() {
    //   let data = {
    //     gradelevelSeq: "",
    //     gradelevelName: ""
    //   };
    //   getmemberrules(data).then(res => {
    //     this.tableData2 = res.records;
    //   });
    // },
    //移除商品
    deleteR(v) {
      var goodsSeq = v.goodsId;
      this.selectData.forEach((item, i) => {
        if (goodsSeq === this.selectData[i].goodsId) {
          this.selectData.splice(i, 1);
        }
      });
    },

    //保存积分规则
    confirmEdit() {
      //   let memberDayStr = "";
      //   if (this.memberDay != null && this.memberDay.length > 0) {
      //     this.memberDay.forEach((item, i) => {
      //       memberDayStr += item + ",";
      //     });
      //     memberDayStr = memberDayStr.substring(0, memberDayStr.length - 1);
      //   } else {
      //     this.$message.error("会员日不能为空！");
      //     return false;
      //   }
      //   let goodsRulesStr = [];
      //   this.selectData.forEach((item, i) => {
      //     let data = {
      //       goodsId: item.goodsSeq,
      //       bonuspointRatio: item.bonuspointRatio,
      //       goodsName: item.goodsName,
      //       status: item.status
      //     };
      //     goodsRulesStr.push(data);
      //   });
      //   let levelRulesStr = [];
      //   console.log(this.tablekongtwo, "LKLKLK");
      //   this.tablekongtwo.forEach((item, i) => {
      //     let data = {
      //       bonuspointRatio: item.bonuspointRatio,
      //       levelName: item.levelName,
      //       gradeLevel: item.gradeLevel,
      //       status: item.status
      //     };
      //     levelRulesStr.push(data);
      //   });
      //   let perioRulesStr = [];
      //   this.festdate.forEach((item, i) => {
      //     let data = {
      //       festivalName: item.festivalName,
      //       bonuspointRatio: item.bonuspointRatio,
      //       beginTime: item.beginTime,
      //       endTime: item.endTime,
      //       status: 1
      //     };
      //     perioRulesStr.push(data);
      //   });
      //   this.signRules.push({
      //     signTimes: this.ruleForm.signTimes,
      //     bonuspoint: this.ruleForm.bonuspoint
      //   });
      let data = {
        signBonuspoint: this.ruleForm.signBonuspoint,
        uuid: this.ruleForm.uuid,

        moneyRate: this.ruleForm.moneyRate,
        memberDay: this.ruleForm.memberDay,
        memberDayRatio: this.ruleForm.memberDayRatio,
        birthRatio: this.ruleForm.birthRatio
      };

      updateMember(data).then(res => {
        this.$message({
          showClose: true,
          message: res.message,
          type: "success"
        });
        // this.resetForm();
      });
    },

    //是否是数字
    isNumber2(valStr) {},

    handleSizeChange(val) {
      this.listQuery.size = val;
      this.search();
    },
    handleSelectionChangetwo(val) {
      console.log(val, "llt");
      //   this.multipleSelection = val;
      this.tabletwo = val;
      //   this.tabletwo.push({ bonuspointRatio: item.bonuspointRatio });
      console.log(this.tabletwo, "PPOHK");
      this.multipleSelectionId = this.tabletwo.map(item => {
        return item.gradelevelId;
      }); //勾选放在multipleSelection数组中
      console.log(this.multipleSelectionId, "oo");
      this.members = [];
      this.tabletwo.forEach((item, i) => {
        let data2 = {
          uuid: "",
          promotionPlanId: "",
          level: item.levelNumber,
          status: item.status,
          updateTime: item.updateTime,
          createTime: item.createTime,
          createUser: item.createUser,
          updateUser: item.updateUser,
          gradelevelName: item.gradelevelName,
          tenantId: item.tenantId,
          beginScore: item.beginScore,
          endScore: item.endScore
        };

        this.members.push(data2);
      });
    },
    kongtwo() {
      this.dialogVisible2 = false;
      //   this.tablekongtwo = this.tabletwo;
      console.log(this.tabletwo, "ll");
      this.tabletwo.forEach((item, i) => {
        let data = {
          gradeLevel: this.tabletwo[i].gradelevelId,
          levelName: this.tabletwo[i].gradelevelName,
          beginScore: this.tabletwo[i].beginScore,
          createUser: this.tabletwo[i].createUser,
          createTime: this.tabletwo[i].createTime,
          endScore: this.tabletwo[i].endScore,
          gradelevelSeq: this.tabletwo[i].gradelevelSeq,
          levelNumber: this.tabletwo[i].levelNumber,
          status: this.tabletwo[i].status,
          updateTime: this.tabletwo[i].updateTime,
          updateUser: this.tabletwo[i].updateUser
        };
        this.tablekongtwo.push(data);
      });
    },
    deletday() {
      this.festdate.forEach((item, i) => {
        var index = this.festdate[i].index;
        if (index === this.festdate[i].index) {
          this.festdate.splice(i, 1);
          // delete this.selectData[i];
        }
      });
    },
    edittwo(v) {
      console.log(v);

      var goodsSeq = v.gradelevelSeq;
      this.tablekongtwo.forEach((item, i) => {
        if (goodsSeq === this.tablekongtwo[i].gradelevelSeq) {
          this.tablekongtwo.splice(i, 1);
          // delete this.selectData[i];
        }
      });
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.search();
    }
  }
};
</script>
<style  lang="less" scoped>
.title {
  display: block;
  margin-left: -2%;
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 18px;
  color: #666 !important;
  border-style: solid;
}

.layui-field-title {
  border-width: 0px 0 0;
}

.label_edit {
  margin-left: -15px;
}
.cellLabel {
  margin-left: -80px;
}
.add_div_css {
  width: 80px;
  height: 80px;
  border: 1px solid #ddd;
  position: relative;
  margin-top: 15px;
}
.add_div_w_css {
  width: 36px;
  height: 2px;
  background: #eee;
  position: absolute;
  top: 39px;
  left: 22px;
}
.add_div_h_css {
  width: 2px;
  height: 36px;
  background: #eee;
  position: absolute;
  top: 22px;
  left: 39px;
}

.list-card {
  padding: 20px 20px 4px 20px;
}

.list-card li {
  position: relative;
  float: left;
  top: 0px;
  font-size: 12px;
  left: 0px;
  margin-right: 14px;
  margin-bottom: 16px;
  padding: 15px 9px;
  width: 160px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #bdced9;
  border-radius: 2px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.input_edit {
  // position: relative;
  font-size: 14px;
  //display: inline-block;
  width: 150px;
}

.list-card .list-card-title {
  font-size: 14px;
  color: #333333;
  text-align: center;
  font-weight: bold;
  line-height: 30px;
}

.list-card .list-card-content {
  font-size: 12px;
  color: #555555;
  text-align: center;
  height: 40px;
  line-height: 14px;
  margin-bottom: 0px;
  display: -webkit-box;
}

.list-card .operation-btn {
  width: 60px;
  height: 24px;
  line-height: 24px;
  border: 1px solid #d2d2d2;
  border-radius: 2px;
  text-align: center;
  color: #666;
  margin: 0 auto;
  transition: 0.3s;
  cursor: pointer;
}
.adminSet {
  border: 1px solid #ebeef5;
  margin-left: 150px;
  padding: 8px 0px 20px 180px;
  width: 54%;
}
em {
  color: #09c;
  font-weight: bold;
  font-style: normal;
}
.el-icon-document:before {
  content: "\E785";
  float: left;
  color: #000;
  margin-right: 5px;
}
.el-dialog__body {
  padding: 10px 44px 58px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}
</style>